<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1,#box2{
            background-color: skyblue;
            height: 50px;
        }
        /*#box1{*/
        /*    margin-bottom: 5px;*/
        /*    margin-left: 5px;*/
        /*}*/
        #box2{
            /*上下左右*/
            /*margin: 5px;*/
            /*margin: 5px 10px;*/
            /*margin: 5px 10px 15px;*/
            margin: 5px 10px 15px 20px;
            /*margin-top: 5px;*/
            /*margin-right: 5px;*/
        }

        #box2{
            border: 1px solid red;
            /*border-top: 1px solid red;*/
            /*border-right: 5px dotted yellow;*/
            /*border-bottom: 5px dashed pink;*/
            /*border-left: 5px solid blue;*/
        }

        #box2{
            padding: 10px;
            padding: 5px 10px;
            /*填充不在撑开盒子大小*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!--
   所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
   Margin(外边距) - 清除边框外的区域，外边距是透明的。
  Border(边框) - 围绕在内边距和内容外的边框。
  Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  Content(内容) - 盒子的内容，显示文本和图像
-->

<!--
   网页布局时 会经常使用div标签划分页面结构    p  h1  html标签语义大于作用

   div 块元素   独占一行
-->

<div id="box1">
这是一个div盒子
</div>

<div id="box2">
    这是一个div盒子2
</div>

</body>
</html>